<template>
  <div style="background: #eee">
    <div class="gui-padding">
      <a-row :gutter="15">
        <dashboard-card></dashboard-card>
      </a-row>
      <a-row :gutter="0" class="mt15">
        <a-col class="gutter-row" :span="24">
          <dashboard-china-map chart-id="chinamap"></dashboard-china-map>
        </a-col>
      </a-row>
      <a-row :gutter="0" class="mt15">
        <a-col class="gutter-row" :span="24">
          <dashboard-order-charts></dashboard-order-charts>
        </a-col>
      </a-row>
      <a-row :gutter="15" class="mt15">
        <a-col class="gutter-row" :span="12">
          <dashboard-pie-charts-broswer></dashboard-pie-charts-broswer>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <dashboard-pie-charts-os></dashboard-pie-charts-os>
        </a-col>
      </a-row>
      <a-row :gutter="0" class="mt15">
        <a-col class="gutter-row" :span="24">
          <dashboard-lei-da  chart-id="chinamap"></dashboard-lei-da>
        </a-col>
      </a-row>

      <a-row :gutter="15" class="mt15">
        <a-col class="gutter-row" :span="10">
          <a-card title="Default size card">
            <template #extra><a href="#">more</a></template>
            <dashboard-reg></dashboard-reg>
          </a-card>
        </a-col>
        <a-col class="gutter-row" :span="14">
          <a-card title="Default size card">
            <template #extra><a href="#">more</a></template>
            <dashboard-table></dashboard-table>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script setup>
</script>
<style scoped lang="scss">
.gutter-box {
  background: #0092ff;
  padding: 8px 0;
}
</style>